import { debounce } from "lodash"
import jQuery from "jquery"
window.$ = window.jQuery = jQuery
// import _ from "lodash"
import { searchList } from "./api.js"



$(function() {
	
	// console.log(debounce)
	$(".search button").on("click", debounce(function() {
		const wd = $(this).prev().val()
		if(!wd) {
			return false
		}
		// http://localhost:3000/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA
		
		searchList(wd).then(({ result }) => {
			const { songs: list = [] } = result
			$("ol").empty()
			list.forEach((item) => {
				const { name, id, artists } = item
				const artsNames = artists.map((art) => `<a href="./artist.html?id=${art.id}">${art.name}</a>`)
				$(`<li>
					<span>${name}-${artsNames}</span>
					<button data-id="${id}">播放</button>
				</li>`).appendTo("ol")
			})
		}).catch((e) => {
			console.log(e)
			// 
		})
	}, 500))
	
	$("ol").on("click", "button", function() {
		const ID = $(this).data("id")
		const url = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
		$("#mp3").attr("src", url)
		$("#mp3")[0].play()
		
		$(this).text("ing").parent().siblings().find("button").text("播放")
	})
	
	/*
	$(".search button").on("click", _.debounce(function() {
		console.log("搜索")
	}, 300))
	
	
	$(".search button").on("click", function() {
		const wd = $(this).prev().val()
		if(!wd) {
			return false
		}
		// http://localhost:3000/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA
		$.ajax({
			url: `http://localhost:3000/search?keywords=${wd}`,
			success({ result }) {
				const { songs: list = [] } = result
				
				$("ol").empty()
				list.forEach((item) => {
					const { name, id, artists } = item
					
					const artsNames = artists.map((art) => `<a href="./artist.html?id=${art.id}">${art.name}</a>`)
					
					$(`<li>
						<span>${name}-${artsNames.join(",")}</span>
						<button data-id="${id}">播放</button>
					</li>`).appendTo("ol")
				})
			}
		})
		
		
		
		$("ol").on("click", "button", function() {
			const ID = $(this).data("id")
			const url = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
			$("#mp3").attr("src", url)
			$("#mp3")[0].play()
			
			$(this).text("ing").parent().siblings().find("button").text("播放")
		})
		
		// `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
	})
	*/
})




